<!--<template>-->
<!--  <h1>用车申请页</h1>-->
<!--</template>-->

<!--<script setup>-->

<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<template>
  <el-upload
      v-model:file-list="fileList"
      v-model:action="actionUrl"
      name="file"
      limit="1"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl"/>
  </el-dialog>
  <hr>
  <h4>显示图片路径:{{tempImgUrl}}</h4>
  <img :src="BASE_URL+tempImgUrl" alt="">
</template>

<script setup>
import { ref } from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";


//定义数组用来保存上传的图片对象
const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

//定义变量存储图片路径
const tempImgUrl = ref('');

//定义变量用来保存图片提交的后端接口地址
const actionUrl = ref(BASE_URL+'/v1/file/upload');

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  console.log(imgUrl);
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success(response.data.msg);
    }else {
      ElMessage.error(response.data.msg);
    }
  });
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
  console.log(uploadFile.response.data);
  console.log(fileList.value[0].response.data);
  tempImgUrl.value = fileList.value[0].response.data;
  // tempImgUrl.value = uploadFile.response.data;
}

</script>